<template>
    <Teleport to="body">
        <div id="floating" class="floating-bubble" :style="{ top: top }">
            <slot>
            </slot>
        </div>
    </Teleport>
</template>

<script lang="ts"  setup>
import { onMounted } from 'vue';
import { ref } from 'vue';

const top = ref('80%');
const isStart = ref(false);

const start = () => {
    isStart.value = true;
};
onMounted(() => {
    document.getElementById('floating')?.addEventListener('touchstart', start, true);
});

const wH = window.outerHeight;
document.documentElement.ontouchmove = (e: TouchEvent) => {
    if (isStart.value) {
        const { changedTouches } = e;
        let y = changedTouches[0].clientY - 15;
        if (y < 50) {
            y = 50;
        }
        if (y > wH - 80) {
            y = wH - 80;
        }
        top.value = y.toString() + 'px';
    }
};
document.documentElement.ontouchend = () => {
    isStart.value = false;
};
</script>

<style lang="scss" scoped>
.floating-bubble {
    position: fixed;
    z-index: 99999;
    // top: 80%;
    right: 0;
    height: auto;
    width: auto;
}
</style>
